<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/touwei_4.css" />
		<link rel="stylesheet" type="text/css" href="css/settle_4.css" />

		<link rel="stylesheet" type="text/css" href="js/jquery.step.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="js/jquery.step.min.js"></script>

		<script src="js/11jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<meta name="viewport" content="width=device-width">
	</head>

	<body>
		<div id="web">
			<!--顶部-->
			<div class="top">
				<div class="top_login clearfix">
					<span class="fl t_lef"><a href="register_4.html">注册</a>|<a href="register_4.html">登录</a>|<a href="register_4_vip.html">VIP登录</a></span>
					<span class="fr t_rig"><a href="shopping_4.html">付款</a>|<a href="register_4.html">我的订单</a>|<a href="settle_4.html"><img src="img/gouwuche.png"/ style="vertical-align: middle;padding-right: 5px;"><b>(0)</b></a></span>
				</div>
			</div>
			<!--搜索框-->
			<div class="search clearfix">
				<div class="logo">
					<a href="index.html"><img src="img/logo.jpg" /></a>
				</div>
				<div class="search_inp fr ">
					<form class="for" action="" method="post">
						<input class="inp_1" type="search" name="" id="" value="" placeholder="search" />
						<input class="inp_2" type="image" value="" src="img/glass.jpg" />
					</form>
					<span><a href="">地板</a>|<a href="">地板</a>|<a href="">地板</a>|<a href="">地板</a>|<a href="">地板</a>|<a href="">地板</a></span>
				</div>
			</div>
			<!--以上是页面头部-->

			<!--导航-->
			<nav>
				<ul class="clearfix">
					<li>
						<a href="">木工</a>
					</li>
					<li>
						<a href="">泥水工</a>
					</li>
					<li>
						<a href="">油漆工</a>
					</li>
					<li>
						<a href="">水电工</a>
					</li>
					<li>
						<a href="">门窗/其它</a>
					</li>
					<li>
						<a href="">装修工具</a>
					</li>
					<li>
						<a href="">消防材料</a>
					</li>
					<li>
						<a href="">建筑护防</a>
					</li>
					<li>
						<a href="">精细化学品</a>
					</li>
					<li>
						<a href="">定制/非标准</a>
					</li>
				</ul>
			</nav>

			<form action="" method="post">
				<div class="big ">
					<div class="shopping clearfix">
						<div class="shopping_1  fl">
							<h3>我的购物车</h3>
							<div class="shopping_2">
								<div class="shop_h">
									<a href="register_4_vip.html">VIP平时享受正价九折优惠</a>
								</div>
							</div>
							<div class="div1">
								<p class="p1">商品<span class="sp1">数量</span><span class="sp2">价格</span><span class="sp3">小计</span></p>
							</div>
							<div class="ts_1 clearfix">
								<div class=" img1 fl">
									<a href=""><img src="img/shopping_4_1.jpg" /></a>
								</div>
								<ul class="jl fl">
									<li class="ts_li">
										<span>商品品牌名称</span>
										<span class="shu1">
											<input class="min" name="" type="button" value="-" style="width: 15px;"/>
											<input class="text_box" name="" type="text" value="1" style="width: 34px;text-align: center;"/>
											<input class="add" name="" type="button" value="+" style="width: 15px;"/>
										</span>
										<span class="sp3">¥150.00</span>
										<span class="sp4"> ¥750.00</span>
									</li>
									<li>
										<a href="">删除</a>
									</li>
									<li><span class="sp6">颜色 : </span>白色</li>
									<li><span class="sp7">规格 : </span>规格规格</li>
									<li><span class="sp8">货号 : NH5478525666</span></li>
									<li>修改</li>
								</ul>
								<div class="xian_1 fl">

								</div>
							</div>
							<div class="ts_2 clearfix">
								<div class=" img1 fl">
									<a href=""><img src="img/shopping_4_1.jpg" /></a>
								</div>
								<ul class="jl fl">
									<li class="ts_li">
										<span>商品品牌名称</span>
										<span class="shu1">
											<input class="min" name="" type="button" value="-" style="width: 15px;"/>
											<input class="text_box" name="" type="text" value="1" style="width: 34px;text-align: center;"/>
											<input class="add" name="" type="button" value="+" style="width: 15px;"/>
										</span>
										<span class="sp3">¥150.00</span>
										<span class="sp4"> ¥750.00</span>
									</li>
									<li>
										<a href="">删除</a>
									</li>
									<li>
										<a href=""></a><span class="sp6">颜色 : </span>白色</li>
									<li><span class="sp7">规格 : </span>规格X规格</li>
									<li><span class="sp8">货号 : NH5478525666</span></li>
									<li>修改</li>
								</ul>
								<div class="xian_2 fl">

								</div>
							</div>

						</div>
						<div class="jieshuan fl">
							<ul>
								<li class="c1">商品名称<span class="ji1">X5</span><span class="ji2">¥750.00</span></li>
								<li class="c2">商品名称<span class="ji1">X5</span><span class="ji2">¥750.00</span></li>
								<li class="c3">优惠<span class="ji3">(以结算页为准)</span></li>
								<li class="c4">运费<span class="ji4">¥0.00</span></li>
								<li class="c6"></li>
								<li class="c7">订单总额<span class="ji7">人民币1500.00</span></li>
								<li class="c8">
									<a href="shoppin"><input type="submit" name="" id="" value="结算" /></a>
								</li>
							</ul>
						</div>
						<div class="shopping_3 fl ">
							<p>推荐商品</p>
							<div class="shopping_4">
								<div class="shop_h">
									<a href="">客官看看下面的推荐产品</a>
								</div>
							</div>

							<!--<div class="photo clearfix">
								<div class="ph1 fl">
									<a href=""><img src="img/kuohao_1.png" /></a>
								</div>
								<div class="ph2 fl">
									<div class="ph2_1">
										<a href=""><img src="img/shopping_4_1.jpg" /></a>
									</div>
									<p>
										<a href="">产品名称</a>
									</p>
									<p>
										<a href="">产品型号</a>
									</p>
									<p>
										<a href="">产品价格</a>
									</p>
								</div>
								<div class="ph3 fl">
									<div class="ph3_1">
										<img src="img/shopping_4_1.jpg" />
										<p>
											<a href="">产品名称</a>
										</p>
										<p>
											<a href="">产品型号</a>
										</p>
										<p>
											<a href="">产品价格</a>
										</p>
									</div>
								</div>
								<div class="ph4 fl">
									<div class="ph4_1">
										<a href=""><img src="img/shopping_4_1.jpg" /></a>
									</div>
									<p>
										<a href="">产品名称</a>
									</p>
									<p>
										<a href="">产品型号</a>
									</p>
									<p>
										<a href="">产品价格</a>
									</p>
								</div>
								<div class="ph5 fl">
									<div class="ph5_1">
										<a href=""><img src="img/shopping_4_1.jpg" /></a>
									</div>
									<p>
										<a href="">产品名称</a>
									</p>
									<p>
										<a href="">产品型号</a>
									</p>
									<p>
										<a href="">产品价格</a>
									</p>
								</div>
								<div class="ph6 fr">
									<a href=""><img src="img/kuohao_2.png" /></a>
								</div>
							</div>-->
							<div class="box-tp">
								<div style="transform: rotateY(0deg) translateZ(275px);">
									<img src="img/shopping_4_1.jpg" >
								</div>
								<div style="transform: rotateY(40deg) translateZ(275px);">
									<img src="img/shopping_4_1.jpg">
								</div>
								<div style="transform: rotateY(80deg) translateZ(275px);">
									<img src="img/shopping_4_1.jpg">
								</div>
								<div style="transform: rotateY(120deg) translateZ(275px);">
									<img src="img/shopping_4_1.jpg">
								</div>
								<div style="transform: rotateY(160deg) translateZ(275px);">
									<img src="img/shopping_4_1.jpg">
								</div>
								<div style="transform: rotateY(200deg) translateZ(275px);">
									<img src="img/shopping_4_1.jpg">
								</div>
								<div style="transform: rotateY(240deg) translateZ(275px);">
									<img src="img/shopping_4_1.jpg">
								</div>
								<div style="transform: rotateY(280deg) translateZ(275px);">
									<img src="img/shopping_4_1.jpg">
								</div>
								<div style="transform: rotateY(320deg) translateZ(275px);">
									<img src="img/shopping_4_1.jpg" >
								</div>					
							</div>
						</div>

					</div>
					
					</from>
					<!--底部-->
					<div class="di_bu">
						<div class="di_bu_main clearfix">
							<ul class="ul">
								<li>
									<img class="fl" src="img/you.jpg" />
									<div class="di_bu_a fl">
										<span><a href="">品质保障</a></span><br />
										<span><a href="">品质保证</a> <a href="">购物无忧</a></span>
									</div>
									<img src="img/line.jpg" />
								</li>
								<li>
									<img class="fl" src="img/sheng.jpg" />
									<div class="di_bu_a fl">
										<span><a href="">特色服务</a></span><br />
										<span><a href="">针对户型</a> <a href="">私人定制</a></span>
									</div>
									<img src="img/line.jpg" />
								</li>
								<li>
									<img class="fl" src="img/te.jpg" />
									<div class="di_bu_a fl">
										<span><a href="">全网最低</a></span><br />
										<span><a href="">厂家直销</a> <a href="">低价承诺</a></span>
									</div>
									<img src="img/line.jpg" />
								</li>
								<li>
									<img class="fl" src="img/figure.jpg" />
									<div class="di_bu_a fl">
										<span><a href="">帮助中心</a></span><br />
										<span><a href="">您的购物指南</a></span>
									</div>
								</li>
							</ul>

							<ul class="di_bu_nav clearfix">
								<li>
									<a href="">新手指南</a><br />
									<span><a href="">新手指南</a></span><br />
									<span><a href="">购物流程</a></span>
								</li>
								<li>
									<a href="">支付方式</a><br />
									<span><a href="">支付宝</a></span><br />
									<span><a href="">微信支付</a></span>
								</li>
								<li>
									<a href="">物流配送</a><br />
									<span><a href="">配送方式</a></span><br />
									<span><a href="">服务流程</a></span>
								</li>
								<li>
									<a href="">客服中心</a><br />
									<span><a href="">在线客服</a></span><br />
									<span><a href="">常见问题</a></span></a>
								</li>
								<li>
									扫一扫，关注鲁班兄弟<br />
									<img src="img/QR.jpg" />
								</li>
							</ul>
						</div>
					</div>

					<footer>
						<div class="foot">
							<span>Copyright © 2015-2016 QDTG. All rights reserved. 鲁班兄弟 粤ICP16035771</span> |
							<a href="">关于我们</a>|
							<a href="">联系我们</a>|
							<a href="">法律声明</a>
						</div>
					</footer>
				</div>
		</div>
		<script language="javascript">
			$(document).ready(function() {

				/*	2nd example	*/

				$("nav li a").wrapInner('<span class="out"></span>');

				$("nav li a").each(function() {
					$('<span class="over">' + $(this).text() + '</span>').appendTo(this);
				});

				$("nav li a").hover(function() {
					$(".out", this).stop().animate({
						'top': '40px'
					}, 300); // move down - hide
					$(".over", this).stop().animate({
						'top': '0px'
					}, 300); // move down - show

				}, function() {
					$(".out", this).stop().animate({
						'top': '0px'
					}, 300); // move up - show
					$(".over", this).stop().animate({
						'top': '-44px'
					}, 300); // move up - hide
				});

			});
		</script>
	</body>

	<script>
		$(function() {
			$(".add").click(function() {
				var t = $(this).parent().find('input[class*=text_box]');
				t.val(parseInt(t.val()) + 1)
				setTotal();
			})
			$(".min").click(function() {
				var t = $(this).parent().find('input[class*=text_box]');
				t.val(parseInt(t.val()) - 1)
				if(parseInt(t.val()) < 0) {
					t.val(0);
				}
				setTotal();
			})

			function setTotal() {
				var s = 0;
				$("#tab td").each(function() {
					s += parseInt($(this).find('input[class*=text_box]').val()) * parseFloat($(this).find('span[class*=price]').text());
				});
				$("#total").html(s.toFixed(2));
			}
			setTotal();

		})
	</script>
	<script>
		var swiper = new Swiper('.swiper-container', {
			spaceBetween: 50,
			slidesPerView: 2,
			centeredSlides: true,
			slideToClickedSlide: true,
			grabCursor: true,
			nextButton: '.swiper-button-next',
			prevButton: '.swiper-button-prev',
			scrollbar: '.swiper-scrollbar',
			pagination: '.swiper-pagination',
			history: 'slide',
		});
	</script>

</html>